<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>论文管理系统 - 搜索</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .search-container {
            margin-bottom: 20px;
        }

        .search-container form {
            display: flex;
            align-items: center;
        }

        .search-container input[type="text"] {
            flex-grow: 1;
            margin-right: 10px;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
        }

        .search-container button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search-container button:hover {
            background-color: #0056b3;
        }

        .paper-item {
            border-bottom: 1px solid #e9ecef;
            padding: 15px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .paper-item:hover {
            background-color: #f8f9fa;
        }

        .paper-item h3 {
            margin-top: 0;
            font-size: 1.2em;
        }

        .paper-item p {
            margin: 5px 0;
            color: #555;
        }

        .no-results {
            text-align: center;
            color: #777;
            margin-top: 20px;
        }

        .paper-details {
            margin-top: 20px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            display: none; /* 默认隐藏 */
        }

        .paper-details h4 {
            margin-top: 0;
            font-size: 1.5em;
        }

        .paper-details p {
            margin: 10px 0;
            color: #333;
        }

        /* 新增样式：介绍区域 */
        .introduction-section {
            margin-bottom: 20px;
        }

        .introduction-section .card {
            margin-bottom: 20px;
        }

        .introduction-section .card-header {
            background-color: #007bff;
            color: #fff;
            font-weight: bold;
        }

        .introduction-section .card-body p {
            color: #333;
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 介绍区域 -->
    <section class="introduction-section">
        <!-- 中国期刊网介绍 -->
        <div class="card">
            <div class="card-header">
                中国期刊网介绍
            </div>
            <div class="card-body">
                <p>中国期刊网（China National Knowledge Infrastructure, CNKI）是中国最大的学术文献、资料、信息集成的全文数据库。它涵盖了多个学科领域的期刊、会议论文、学位论文等资源，为科研人员、教师、学生等提供了丰富的学术资源。</p>
                <p>CNKI不仅提供全文检索服务，还支持多种检索方式，如关键词检索、作者检索、机构检索等。此外，CNKI还提供了文献引证分析、学术趋势分析等功能，帮助用户更全面地了解某一领域的研究动态。</p>
            </div>
        </div>

        <!-- 本系统功能介绍 -->
        <div class="card">
            <div class="card-header">
                本系统功能介绍
            </div>
            <div class="card-body">
                <p>本论文管理系统旨在为用户提供便捷的论文搜索和管理功能。通过本系统，用户可以：</p>
                <ul>
                    <li><strong>搜索论文：</strong>用户可以通过关键词、作者、发表日期等多种条件进行论文搜索，快速找到所需的学术资源。</li>
                    <li><strong>查看论文详情：</strong>点击搜索结果中的某篇论文，用户可以查看该论文的详细信息，包括标题、作者、摘要、发表日期等。</li>
                    <li><strong>保存和管理论文：</strong>用户可以将感兴趣的论文保存到个人收藏夹中，方便日后查阅和管理。</li>
                    <li><strong>分享论文：</strong>用户可以将论文链接分享给同事或朋友，促进学术交流。</li>
                    <li><strong>导出论文：</strong>用户可以将论文导出为PDF或其他格式，方便打印或离线阅读。</li>
                </ul>
                <p>未来，我们将继续优化系统功能，增加更多实用的功能，如论文推荐、学术社区等，以满足用户日益增长的需求。</p>
            </div>
        </div>
    </section>

    <!-- 搜索表单 -->
    <div class="search-container">
        <form id="search-form" class="d-flex">
            <input type="text" id="search-input" name="keyword" placeholder="请输入关键词..." class="form-control" />
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
    </div>

    <!-- 搜索结果展示区域 -->
    <div id="search-results" class="mt-4"></div>

    <!-- 论文详情展示区域 -->
    <div id="paper-details" class="paper-details mt-4"></div>
</div>

<script th:inline="javascript">
    var prefix = ctx + "system/gcypaper"; // 确保上下文路径正确

    $(function() {
        // 初始化表格
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "论文管理3",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '论文编号',
                    visible: false
                },
                {
                    field: 'title',
                    title: '论文标题'
                },
                {
                    field: 'author',
                    title: '论文作者'
                },
                {
                    field: 'paperAbstract',
                    title: '论文摘要'
                },
                {
                    field: 'datetime',
                    title: '日期时间'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if ([[${@permission.hasPermi('system:gcypaper:edit')}]]) {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        }
                        if ([[${@permission.hasPermi('system:gcypaper:remove')}]]) {
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        }
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

        // 添加搜索功能
        $('#search-form').on('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            var keyword = $('#search-input').val();
            if (keyword.trim() === '') {
                alert('请输入关键词');
                return;
            }

            // 发送AJAX请求到后端
            fetch(prefix + '/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    'keyword': keyword
                })
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应失败');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.code !== 0) {
                        alert('搜索失败，请稍后再试。');
                        return;
                    }
                    // 更新表格数据
                    $.table.refresh({
                        data: data.rows,
                        total: data.total || 0 // 确保分页信息正确
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('搜索失败，请稍后再试。');
                });
        });
    });
</script>


<!-- 引入 Bootstrap JS 和 Popper.js (如果需要) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>